<!-- 作业门管理 -->
<div nz-row style="background-color:white;padding:10px 20px;">
  <div nz-col nzSpan="24">
    <form nz-form [formGroup]="formgroup_query">
      <!-- 查询条件 -->
      <div nz-row>
        <div nz-col [nzSpan]="24" class="sxdgl-form-flex">
          <nz-form-item nzFlex class="sxdgl-form-item">
            <nz-form-label>作业门名称</nz-form-label>
            <nz-form-control>
              <input [formControlName]="ctrlNames.name" nz-input placeholder="作业门名称" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item nzFlex class="sxdgl-form-item">
            <nz-form-label>所属车站</nz-form-label>
            <nz-form-control>
              <!-- <textarea nz-input [formControlName]="ctrlNames.station" (click)="onChange_cz('query',$event)"
                (ngModelChange)="onChange_cz('query',$event)" [nzAutocomplete]="auto_cz" nzAutosize="true"></textarea>
              <nz-autocomplete #auto_cz nzWidth="200px">
                <nz-auto-option *ngFor="let opt of queryData.station.filterData" [nzValue]="opt.opValue"
                  [nzLabel]="opt.opName">
                  {{opt.opName}}
                </nz-auto-option>
              </nz-autocomplete> -->
              <nz-tree-select [formControlName]="ctrlNames.station" [(ngModel)]="queryData.station.nowValue"
                nzPlaceHolder="请选择" style="width:200px" nzMaxTagCount="1" [nzDropdownStyle]="{height:'250px'}"
                [nzNodes]="queryData.station.data" [nzDefaultExpandAll]="false" [nzAllowClear]="true"
                [nzMultiple]="false" (ngModelChange)="queryData.station.onChange($event)"
                (nzTreeClick)="queryData.station.nzTreeClick($event)">
              </nz-tree-select>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item nzFlex class="sxdgl-form-item">
            <nz-form-label>包含设备</nz-form-label>
            <nz-form-control>
              <nz-tree-select [formControlName]="ctrlNames.dev" [(ngModel)]="queryData.dev.nowValues"
                nzPlaceHolder="请选择" style="width:200px" nzMaxTagCount="1" [nzDropdownStyle]="{height:'250px'}"
                [nzNodes]="queryData.dev.data" [nzDefaultExpandAll]="false" [nzAllowClear]="true" [nzMultiple]="false"
                (click)="devClick('query')" (nzExpandChange)="onDevExpand('query',$event)">
              </nz-tree-select>
            </nz-form-control>
          </nz-form-item>
          <div style="padding: 0.3em;">
            <button nz-button [nzType]="'primary'" (click)="query(true)">查询</button>
            <button *ngIf="pageType=='edit'" nz-button (click)="showAddPanel()">新增</button>
          </div>
        </div>
      </div>

      <!-- <div nz-row style="padding:10px 0px">
        <div nz-col [nzSpan]="24">
          <button nz-button (click)="showAddPanel()">新增</button>
          <button nz-button [nzType]="'primary'" (click)="query(true)">查询</button>
        </div>
      </div> -->
    </form>
  </div>
</div>

<div nz-row style="background-color:white;padding:0px 20px;">
  <div nz-col nzSpan="24">

    <nz-table #basicTable [nzData]="data.tableData" nzSize="small" nzBordered [nzNoResult]="' '"
      [nzFrontPagination]="false" [nzTotal]="data.tableTotal" [(nzPageSize)]="data.tablePagination.rows"
      nzShowSizeChanger [nzShowPagination]="true" [(nzPageIndex)]="data.tablePagination.page"
      (nzPageIndexChange)="nzPageIndexChange()" (nzPageSizeChange)="setPageSize()" [nzShowTotal]="totalTemplate"
      [nzScroll]="lockHeadScroll">
      <ng-template #totalTemplate let-total> 总共 {{ data.tableTotal }} 条数据 </ng-template>
      <thead>
        <tr>
          <!-- <th nzAlign="center">作业门ID</th> -->
          <th nzAlign="center" nzWidth="10%">作业门名称</th>
          <th nzAlign="center">包含设备</th>
          <th nzAlign="center" nzWidth="10%">所属车站</th>
          <th nzAlign="center" nzWidth="20%">钥匙所在地</th>
          <th nzAlign="center" nzWidth="10%">交通图</th>
          <th nzAlign="center" *ngIf="pageType=='edit'" nzWidth="5%">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of basicTable.data;index as i" (dblclick)="showDetail(data)" nz-tooltip
          nzTooltipTitle="双击查看详情" nzTooltipPlacement="bottom" style="cursor:pointer">
          <!-- <td>{{data.nId}}</td> -->
          <td nzAlign="center">{{data.name}}</td>
          <!-- <td>{{data.dev}}</td> -->
          <td>
            <!-- {{data.devName}} -->
            <textarea nz-input [(ngModel)]="data.devName" class="table-textarea" readonly></textarea>
          </td>
          <!-- <td>{{data.station}}</td> -->
          <!-- station字段的翻译字段 -->
          <td nzAlign="center">{{data.stationTrans}}</td>
          <td>{{data.doorkey}}</td>
          <!-- <td>{{data.addrUrl}}</td> -->
          <td nzAlign="center">
            <a *ngIf="data.addrUrl" href="javascript:void(0);" (click)="pic.show(data)">查看</a>
          </td>
          <td *ngIf="pageType=='edit'" nzAlign="center">
            <i nz-icon nzType="edit" nzTheme="outline" (click)="this.showEditPanel(data)" class="hdover-hover"
              style="margin: 0px 5px"></i>
            <i nz-icon nzType="delete" nzTheme="outline" nz-popconfirm nzTitle="确定删除吗？"
              (nzOnConfirm)="this.deleteZym(data)" title="删除" class="hdover-hover"></i>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>
</div>

<nz-modal [(nzVisible)]="pic.visible" [nzTitle]="pic.title" (nzOnCancel)="pic.hide()" [nzFooter]="modalFooter_pic"
  nzWidth="600px" [nzBodyStyle]="pic.panelStyle">

  <img [attr.src]="pic.src" [ngStyle]="pic.picStyle" alt="">


  <ng-template #modalFooter_pic>
    <button nz-button nzType="primary" (click)="pic.hide()" style="margin-right:20px">
      <i nz-icon nzType="save" nzTheme="outline"></i>
      关闭
    </button>
  </ng-template>
</nz-modal>


<!-- 新增面板 -->
<nz-modal [(nzVisible)]="addPanel.showAdd" [nzTitle]="addPanel.title" (nzOnCancel)="hideAddPanel()"
  [nzFooter]="modalFooter_add" nzWidth="600px" [nzBodyStyle]="addPanel.style">
  <form nz-form [formGroup]="formgroup_add" style="padding: 20px;">
    <nz-form-item nzFlex class="sxdgl-form-item">
      <nz-form-label [nzSpan]="8">作业门名称</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <input [formControlName]="ctrlNames_add.name" nz-input placeholder="作业门名称" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzFlex class="sxdgl-form-item">
      <nz-form-label [nzSpan]="8">所属车站</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <!-- <textarea nz-input [formControlName]="ctrlNames_add.station" (click)="onChange_cz('add',$event)"
          (ngModelChange)="onChange_cz('add',$event)" [nzAutocomplete]="auto_cz1" nzAutosize="true"></textarea>
        <nz-autocomplete #auto_cz1 nzWidth="200px">
          <nz-auto-option *ngFor="let opt of addData.station.filterData" [nzValue]="opt.opValue" [nzLabel]="opt.opName">
            {{opt.opName}}
          </nz-auto-option>
        </nz-autocomplete> -->
        <nz-tree-select [formControlName]="ctrlNames_add.station" [(ngModel)]="addData.station.nowValue"
          nzPlaceHolder="请选择" style="width:200px" nzMaxTagCount="1" [nzDropdownStyle]="{height:'250px'}"
          [nzNodes]="addData.station.data" [nzDefaultExpandAll]="false" [nzAllowClear]="true" [nzMultiple]="false"
          (ngModelChange)="addData.station.onChange($event)" (nzTreeClick)="addData.station.nzTreeClick($event)">
        </nz-tree-select>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzFlex class="sxdgl-form-item">
      <nz-form-label [nzSpan]="8">包含设备</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <div style="max-height: 200px;overflow:scroll;">
          <nz-tree-select #dev_add [formControlName]="ctrlNames_add.dev" nzPlaceHolder="请选择" nz-tooltip
            nzTitle="单击二级节点，可进行“全选”操作" [nzDropdownStyle]="{height:'250px'}" [(ngModel)]="addData.dev.nowValues"
            [nzNodes]="addData.dev.data" [nzDefaultExpandAll]="false" [nzAllowClear]="true"
            (ngModelChange)="addData.dev.onDevChange($event)" [nzMultiple]="true" nzMaxTagCount='1'
            (click)="devClick('add')" (nzTreeClick)="addData.dev.nzTreeClick($event)"
            (nzExpandChange)="onDevExpand('add',$event)">
          </nz-tree-select>
        </div>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzFlex class="sxdgl-form-item">
      <nz-form-label [nzSpan]="8">钥匙所在地</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <input [formControlName]="ctrlNames_add.doorkey" nz-input placeholder="钥匙所在地" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzFlex class="sxdgl-form-item">
      <nz-form-label [nzSpan]="8">
        <!-- 交通图链接地址 -->
        <nz-upload style="display: inline-block" [nzShowUploadList]="false" (nzChange)="addData.traficImg($event)"
          [nzAction]="uploadAction">
          <button nz-button><i nz-icon nzType="upload"></i><span>上传交通图</span></button>
        </nz-upload>
      </nz-form-label>
      <nz-form-control [nzSpan]="16">
        <input [formControlName]="ctrlNames_add.addrUrl" nz-input placeholder="交通图链接地址" />
      </nz-form-control>
    </nz-form-item>
  </form>

  <ng-template #modalFooter_add>
    <button nz-button nzType="primary" (click)="addZym()" style="margin-right:20px" [disabled]="addPanel.loading">
      <i nz-icon nzType="save" nzTheme="outline"></i>
      新增
    </button>
  </ng-template>
</nz-modal>


<!-- 修改面板 -->
<nz-modal [(nzVisible)]="editPanel.showEdit" [nzTitle]="editPanel.title" (nzOnCancel)="hideEditPanel()"
  [nzFooter]="modalFooter_edit" nzWidth="600px" [nzBodyStyle]="editPanel.style">
  <form nz-form [formGroup]="formgroup_edit" style="padding: 20px;">
    <nz-form-item nzFlex class="sxdgl-form-item">
      <nz-form-label [nzSpan]="8">作业门名称</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <input [formControlName]="ctrlNames_edit.name" nz-input placeholder="作业门名称" />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nzFlex class="sxdgl-form-item">
      <nz-form-label [nzSpan]="8">所属车站</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <!-- <textarea #station_edit nz-input [formControlName]="ctrlNames_edit.station"
          (click)="onChange_cz('edit',station_edit.value)" (ngModelChange)="onChange_cz('edit',$event)"
          [nzAutocomplete]="auto_cz2" nzAutosize="true"></textarea>
        <nz-autocomplete #auto_cz2 nzWidth="200px">
          <nz-auto-option *ngFor="let station of editData.station.filterData" [nzValue]="station.opValue"
            (click)="stationSelect('edit',station)" [nzLabel]="station.opName">
            {{station.opName}}
          </nz-auto-option>
        </nz-autocomplete> -->
        <nz-tree-select [formControlName]="ctrlNames_edit.station" [(ngModel)]="editData.station.nowValue"
          nzPlaceHolder="请选择" style="width:200px" nzMaxTagCount="1" [nzDropdownStyle]="{height:'250px'}"
          [nzNodes]="editData.station.data" [nzDefaultExpandAll]="false" [nzAllowClear]="true" [nzMultiple]="false"
          (ngModelChange)="editData.station.onChange($event)" (nzTreeClick)="editData.station.nzTreeClick($event)">
        </nz-tree-select>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nzFlex class="sxdgl-form-item">
      <nz-form-label [nzSpan]="8">包含设备</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <div style="max-height: 200px;overflow:scroll;" nz-tooltip nzTitle="单击二级节点，可进行“全选”操作">
          <nz-tree-select [formControlName]="ctrlNames_edit.dev" nzPlaceHolder="请选择"
            [nzDropdownStyle]="{height:'250px'}" [(ngModel)]="editData.dev.nowValues" [nzNodes]="editData.dev.data"
            [nzDefaultExpandAll]="false" [nzAllowClear]="true" (ngModelChange)="editData.dev.onDevChange($event)"
            [nzMultiple]="true" nzMaxTagCount='1' (click)="devClick('edit')"
            (nzTreeClick)="editData.dev.nzTreeClick($event)" (nzExpandChange)="onDevExpand('edit',$event)">
          </nz-tree-select>
        </div>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzFlex class="sxdgl-form-item">
      <nz-form-label [nzSpan]="8">钥匙所在地</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <input [formControlName]="ctrlNames_edit.doorkey" nz-input placeholder="钥匙所在地" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzFlex class="sxdgl-form-item">
      <!-- <nz-form-label [nzSpan]="8">交通图链接地址</nz-form-label> -->
      <nz-form-label [nzSpan]="8">
        <nz-upload style="display: inline-block" [nzShowUploadList]="false" (nzChange)="editData.traficImg($event)"
          [nzAction]="uploadAction">
          <button nz-button><i nz-icon nzType="upload"></i><span>上传交通图</span></button>
        </nz-upload>
      </nz-form-label>
      <nz-form-control [nzSpan]="16">
        <input [formControlName]="ctrlNames_edit.addrUrl" nz-input placeholder="交通图链接地址" />
      </nz-form-control>
    </nz-form-item>
  </form>
  <ng-template #modalFooter_edit>
    <button nz-button nzType="primary" (click)="editZym()" style="margin-right:20px" [disabled]="editPanel.loading">
      <i nz-icon nzType="save" nzTheme="outline"></i>
      保存
    </button>
  </ng-template>
</nz-modal>


<!-- 详情面板 -->
<nz-modal [(nzVisible)]="detailPanel.showdetail" [nzTitle]="'详情'" (nzOnCancel)="hideDetail()"
  [nzFooter]="modalFooter_detail" nzWidth="600px" [nzBodyStyle]="detailPanel.style">
  <form nz-form [formGroup]="formgroup_detail" style="padding: 20px;">
    <nz-form-item nzFlex class="sxdgl-form-item">
      <nz-form-label [nzSpan]="8">作业门名称</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <input [formControlName]="ctrlNames_detail.name" nz-input readonly />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nzFlex class="sxdgl-form-item">
      <nz-form-label [nzSpan]="8">所属车站</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <input [formControlName]="ctrlNames_detail.stationTrans" nz-input readonly />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nzFlex class="sxdgl-form-item">
      <nz-form-label [nzSpan]="8">包含设备</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <div style="max-height: 200px;overflow:scroll;">
          <textarea [formControlName]="ctrlNames_detail.dev" nz-input readonly rows="5"></textarea>
          <!-- <input [formControlName]="ctrlNames_detail.dev" nz-input readonly /> -->
        </div>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzFlex class="sxdgl-form-item">
      <nz-form-label [nzSpan]="8">钥匙所在地</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <input [formControlName]="ctrlNames_detail.doorkey" nz-input readonly />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzFlex class="sxdgl-form-item">
      <nz-form-label [nzSpan]="8">
        交通图
      </nz-form-label>
      <nz-form-control [nzSpan]="16">
        <!-- <input [formControlName]="ctrlNames_detail.addrUrl" nz-input placeholder="交通图链接地址" /> -->
        <img [attr.src]="pic.src" [ngStyle]="pic.picStyle" alt="">
      </nz-form-control>
    </nz-form-item>
  </form>
  <ng-template #modalFooter_detail>
    <button nz-button nzType="primary" (click)="hideDetail()" style="margin-right:20px">
      <i nz-icon nzType="save" nzTheme="outline"></i>
      关闭
    </button>
  </ng-template>
</nz-modal>